<template>
  <div class="inquiry">
    <div class="header">
      <p>
        <i class="el-icon-arrow-left"></i>
        <span>医生列表</span>
        <i class="el-icon-search"></i>
        <i class="el-icon-more"></i>
      </p>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        ><img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608090541827&di=f410de8a6f2f51aaf03618c27b31198f&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F95%2F57%2F4957ed1971993c7.jpg"
          alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608090574920&di=be6304725cd72b1d5d8823b8f362a8be&imgtype=0&src=http%3A%2F%2Fpic.616pic.com%2Fbg_w1180%2F00%2F07%2F06%2Fp0RIt3VdyV.jpg"
          alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608090606564&di=8c28d3493311ffab64bf38edc6ca32ee&imgtype=0&src=http%3A%2F%2Fimg.redocn.com%2Fsheji%2F20200506%2Flansedianzizhinengyiliaobeijingban_10936703_small.jpg"
          alt=""
      /></van-swipe-item>
    </van-swipe>

    <div class="quick">
      <dl>
        <dd>
          <h2>顶级名医</h2>
          <p>名医诊断更靠谱</p>
        </dd>
        <dt>
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608091088179&di=3d9d8a65bd32f031a2899b011201da82&imgtype=0&src=http%3A%2F%2Fdpic.tiankong.com%2Ff3%2Fsf%2FQJ6626083076.jpg" alt="">
        </dt>
      </dl>
      <dl>
        <dd>
          <h2>优选专家</h2>
          <p>三甲医生来解忧</p>
        </dd>
        <dt>
          <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2699439865,1154862341&fm=26&gp=0.jpg" alt="">
        </dt>
      </dl>
    </div>
    <!-- 二级导航 -->
    <div class="nav">
        <el-row class="block-col-2">
          <el-col :span="8">
            <span class="demonstration">全部科室</span>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>

           <el-col :span="6">
            <span class="demonstration">全国</span>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>

           <el-col :span="6">
            <span class="demonstration">推荐排行</span>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>

          <el-col :span="3">
            <span class="demonstration">筛选</span>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                  <i class="el-icon-finished el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
    </div>

    <div class="unusual">
       <dl>
          <dt>
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608132574498&di=0f9991eea58a2ff110ae759b52ebb8ee&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F19%2F20180719221138_3LxAM.jpeg" alt="">
          </dt>
          <dd>
            <p class="tou">
              DOC
              <van-tag type="primary">普通部门</van-tag>
              <van-tag plain type="primary" class="biaoqian">关注</van-tag>
            </p>
            <span>
              擅长疾病
              <van-tag type="danger">发烧</van-tag>
              <van-tag type="danger" class="biaoqian">胃痛</van-tag>
              <van-tag type="danger">糖尿病</van-tag>
            </span>
          </dd>
       </dl>
       <div class="pingjia">
         <p class="p1">
          <span>好评率88.9%</span>
          <span>服务次数86</span>
         </p>
          <p class="p2">
            <span><span>￥100</span>起</span>
            <van-button type="info" class="zixun" @click="$router.replace('/consult')">咨询</van-button>
          </p>
       </div>

       <dl>
          <dt>
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608132647365&di=c6af5ed7e4d5d6cd94d3a3d1a162e975&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201805%2F02%2F20180502205801_cgshq.thumb.700_0.jpg" alt="">
          </dt>
          <dd>
            <p class="tou">
              沈平
              <van-tag type="primary">普通部门</van-tag>
              <van-tag plain type="primary" class="biaoqian">关注</van-tag>
            </p>
            <span>
              擅长疾病
              <van-tag type="danger">发烧</van-tag>
              <van-tag type="danger" class="biaoqian">胃痛</van-tag>
              <van-tag type="danger">糖尿病</van-tag>
            </span>
          </dd>
       </dl>
       <div class="pingjia">
         <p>
          <span>好评率<b>88.9%</b></span>
          <span>服务次数86</span>
         </p>
          <p class="p2">
            <span><span>￥100</span>起</span>
            <van-button type="info" class="zixun">咨询</van-button>
          </p>
       </div>
    </div>
  </div>
</template>

<script>
export default {
  name:"inquiry"
};
</script>

<style scoped>
.pingjia .p2{
  display: flex;
  justify-content: space-between;
}
.pingjia .p1{
  display: flex;
}
.header span,i{
  font-weight: bolder;
  font-size:18px ;
}
.pingjia{
  width: 100%;
  line-height:35px;
}
.unusual .pingjia{
  width: 100%;
  background: #fff;
}
.unusual .zixun{
  border-radius: 20px;
  width: 60px;
  height: 30px;
  font-size: 12px;
  float:right;
}
.unusual .biaoqian{
  margin:10px;
}
.unusual dl dd{
  line-height:40px;
}
.unusual dl .tou{
  font-size: 24px;
  font-weight: bolder;
}

.unusual dl{
  margin-top:10px;
  width: 100%;
  background: #fff;
  display: flex;
}
.unusual dl dt img{
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.header p{
  width: 100%;
  height: 45px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  align-items: center;
}
.header span{
  flex-grow: 30;
}
.header .el-icon-search{
  flex-grow: 3;
}
.header .el-icon-more{
  flex-grow: 1;
}
.my-swipe {
  border-radius: 0.05rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.2rem;
  text-align: center;
  border-radius: 0.05rem;
}
.my-swipe .van-swipe-item img {
  height: 1rem;
  border-radius: 0.05rem;
  width: 100%;
}
.inquiry {
  padding: 0.1rem;
}

.quick {
  background: #fbfbfb;
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.quick dl {
  background: white;
  width: 45%;
  height: 0.8rem;
  border-radius: 0.1rem;
  display: flex;
  justify-content: space-around;
  /* box-shadow: #000000 0.01rem 0.01rem 0.1rem 0.01rem; */
}
.quick dl dt {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.quick dl dd {
  line-height: 0.4rem;
}
.quick dl dt,dd {
  float: left;
}
.quick dt img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 1rem;
}
.inquiry{
  background:#fbfbfb;
}


</style>
